<template>
	<view class="exchange-record">
		<view class="er_header_box">
			<view class="frame">
				<view class="frame_img" @click="searchFunc">
					<image src="/static/my/frame.png" mode=""></image>
				</view>
				<input type="text" placeholder="请输入商品名称" placeholder-class="placeholderClass" v-model="search" @input="searchFunc">
			</view>
            <scroll-view class="scroll-view_H" scroll-x="true" show-scrollbar="true" >
                    <!-- <view class="market_nav"> -->
                    	<view class="market_item" :class="{'on':navIndex == index}" v-for="(item,index) in navList" @click="clickIten(item,index)">{{item.name}}</view>
                    <!-- </view> -->
            </scroll-view>
			
		</view>
		<view class="er_list" v-if="dataList.length != 0">
			<view class="er_item" v-for="(item,index) in dataList" :key="index" @click="jump(item)">
				<block  v-if="item.changeType != 4">
                    <view class="er_item_top">
                    	<view class="item_img">
                    		<image class="imgBox" :src="item.img" mode="aspectFill"></image>
                    	</view>
                    	<view class="item_info ">
                    		<view class="info_title ellipseHide_two">{{item.commodityName}}</view>
                    		<view class="info_other">
                    			<view class="info_coco">
                    				<image src="/static/newsImg/shenye_cion01.png" mode="" v-if="item.priceType == 1"></image>
                                    <image src="/static/newsImg/shenye_cion02.png" mode="" v-if="item.priceType == 2"></image>
                    				<text>{{item.pay}} {{item.priceTypeDict}}</text>
                    			</view>
                    			<view class="service_charge">手续费:{{item.fee}} {{item.feeTypeDict}}</view>
                    		</view>
                    
                    	</view>
                    </view>
                    <view class="er_time">
                    	兑换时间：{{item.createTime}}
                    </view>
                </block>
                <block>
                    <view class="er_item_top"  v-if="item.changeType == 4">
                    	<view class="item_info_new">
                    		<view class="info_title ellipseHide_two">{{item.commodityName}}</view>
                            <view class="info_num">兑换数量： {{item.changeAmount}}CoCo</view>
                    		<view class="info_other">
                    			<view class="info_coco">
                    				<image src="/static/newsImg/shenye_cion01.png" mode="" v-if="item.priceType == 1"></image>
                    				<image src="/static/newsImg/shenye_cion02.png" mode="" v-if="item.priceType == 2"></image>
                    				<text>{{item.pay}} {{item.priceTypeDict}}</text>
                    			</view>
                    			<view class="service_charge">手续费:{{item.fee}} {{item.feeTypeDict}}</view>
                    		</view>
                                
                    	</view>
                    </view>
                </block>
			</view>
		</view>
		<view class="no_info" v-else>
			<image src="/static/my/news_no.png" mode="widthFix"></image>
			<text>暂无兑换记录</text>
		</view>
	</view>
</template>

<script>
	import { getOrderList } from '@/api/api-v1-2.js'
	export default {
		data() {
			return {
				navIndex:0,
				navList:[
					{id:1,name:'全部',changeType:0},
                    {id:5,name:'CoCo兑换',changeType:4},
					{id:2,name:'实物奖品',changeType:1},
					{id:3,name:'NFR',changeType:2},
					{id:4,name:'线上权益',changeType:3},
					{id:5,name:'盲盒优惠券',changeType:5},
				],
				search:'',
				dataList: [],
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
			}
		},
		onLoad() {
			this.getDataList()
		},
		methods: {
			// 初始化参数
			initialization(){
				this.pageNum = 1
				this.listTotal = 0
				this.dataList = []
				this.getDataList()
			},
			// 搜索
			searchFunc(){
				this.initialization()
			},
			async getDataList() {
				uni.showLoading({
					title: '加载中'
				})
				var _this = this
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				}
				if(this.navIndex != 0 ){
					data.changeType = this.navList[this.navIndex].changeType
				}
				if(this.search != '' ){
					data.query = this.search
				}
				try {
					const res = await getOrderList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					var el = res.result.records
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(el); //将数据拼接在一起
					} else {
						this.dataList = el
					}
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
                console.log("this.dataList",this.dataList)
			},
			clickIten(item,index){
				this.navIndex = index
				this.initialization()
			},
			jump(e){
                if(e.changeType != 4){
                    uni.navigateTo({
                    	url:'/pages/my/shenye-market/exchange-record/redemption-details/redemption-details?id='+e.id
                    })
                }
				
			}
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			// console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				// this.moreShop = 'noMore'
			} else {
				// this.moreShop = 'more'
				this.pageNum++; //每触底一次 page + 1;
				this.getDataList()
			}
		}
	}
</script>

<style scoped>
	page{
		background: #F5F5F5;
	}
	.exchange-record{
		padding-top: 236rpx;
		padding-bottom: 50rpx;
	}
	.er_header_box{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 55;
		width: 750rpx;
		background: #ffffff;
		border-bottom: 2rpx solid #E1E1E1;
		padding-top: 18rpx;
	}
	.frame{
		width: 670rpx;
		height: 64rpx;
		margin: 0 auto;
		background: #F5F5F5;
		border-radius: 32rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.frame input{
		font-size: 28rpx;
		 width: 90%;
	}
	.placeholderClass{
		font-size: 28rpx;
		color: #C5C6C8;
	}
	.frame_img{
		width: 48rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.frame image{
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
		
	}
    .scroll-view_H{
        white-space: nowrap;
        padding: 0 40rpx;
        width: 100%;
        box-sizing: border-box;
    }
    .uni-scroll-view{
    }
	.market_nav{
		width: 100%;
		height: 128rpx;
		
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.scroll-view_H .on{
		font-size: 40rpx !important;
		color: #222222 !important;
        font-weight: 500;
		background-image: url('@/static/index/index-yuan.png');
		background-repeat: no-repeat;
		background-size: 48rpx 42rpx;
		background-position: 4px 30rpx;
	}
	.market_item{
        display: inline-block;
		height: 128rpx;
		line-height: 128rpx;
		padding: 0 20rpx;
		font-size: 34rpx;
		color: rgba(51, 51, 51, .8);
	}
	/* 列表 */
	.er_item{
		width: 690rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 26rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}
	.er_item_top{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 24rpx;
		border-bottom: 2rpx dashed #C5C5C5;
	}
	.er_item_top .item_img{
		width: 184rpx;
		height: 166rpx;
		overflow: hidden;
		background: #F1EFF9;
		border-radius: 12rpx;
	}
	.item_info{
		width: calc(100% - 210rpx);
        /* width: 100%; */
	}
    .item_info_new{
         width: 100%;
    }
	.info_title{
		font-size: 30rpx;
		color: #222222;
		margin-bottom: 16rpx;
        font-weight: bold;
	}
    .info_num{
        margin-top: 10rpx;
        color: #222;
        font-size: 28rpx;
    }
	.info_other{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
        margin-top: 16rpx;
	}
	.service_charge{
		font-size: 24rpx;
		color: #333333;
	}
	.info_coco{
		font-size: 30rpx;
		color: #FF1919;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.info_coco image{
		width: 30rpx;
		height: 30rpx;
		margin-right: 14rpx;
	}
    .info_coco image{
    	font-size: 32rpx;
    }
	.er_time{
		color: #666666;
		font-size: 26rpx;
		margin-top: 24rpx;
	}
</style>
